<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="scripts/layui/css/layui.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="scripts/layui/layui.js"></script>
    <title>智能化考试系统使用情况</title>
</head>
<body>

<div class="container">
    <div class="card">
        <div class="card-header">
            <form id="userForm" class="layui-form" action="">
                <div class="layui-inline">
                    <div class="date-range">
                        <input type="text" id="startDate" placeholder="开始日期" class="layui-input">
                        <label>-</label>
                        <input type="text" id="endDate" placeholder="结束日期" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <input type="text" id="globalSearch" placeholder="姓名或登录账号关键词检索" width="300px" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="search">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
            </form>
        </div>
        <div class="card-body">
            <table id="test" class="layui-table"></table>
        </div>
    </div>
</div>

<script>
    function getParameterFromURL(paramName) {
        const urlParams = new URLSearchParams(window.location.search);
        const paramValue = urlParams.get(paramName);
        return paramValue;
    }


    // examTable.js 示例内容
    layui.use(['table', 'form','jquery','laydate'], function () {
        const table = layui.table;
        const $ = layui.jquery;
        const laydate = layui.laydate;
        const form=layui.form;


        const type = getParameterFromURL('type');
        if(!type){
            alert('参数错误,请联系系统管理员！')
            return;
        }
        // 获取当前日期
        var today = new Date();
        var startDateOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); // 当月第一天
        var endDateToday = today; // 今天

        // 格式化日期
        var formatDate = function(date) {
            var month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份补0
            var day = ("0" + date.getDate()).slice(-2); //
            return date.getFullYear() + '-' + month + '-' + day;
        };
        // 初始化日期选择器
        laydate.render({ elem: '#startDate', value: formatDate(startDateOfMonth)});
        laydate.render({ elem: '#endDate', value: formatDate(endDateToday), // 设置默认值为今天
            max: formatDate(endDateToday), // 最大日期为今天
            done: function(value, date){
                // 如果用户手动选择了超过今天的日期，重置为今天
                if (date > endDateToday) {
                    $(this.elem).val(formatDate(endDateToday)); // 重置输入框的值
                    return false; // 阻止选择器关闭
                }
            }});

        // 初始化表格
        const initTable = () => {
            table.render({
                elem: '#test',
                method: 'post',
                url: '/statOnly/exam/searchDetails',
                cols: [[
                    {type: 'numbers', width: 80, title: '序号'},
                    {field: 'userName', title: '姓名',width: 100,align: 'center'}
                    ,{field: 'orgName', title: '部门', sort: true,align: 'center'}
                    ,{field: 'loginCount', title: '登录次数',sort: true,align: 'center'}
                    ,{field: 'lxCount', title: '练习试题数量',  sort: true,align: 'center'}
                    ,{field: 'mockCount', title: '模拟考试次数', sort: true,align: 'center'}
                    ,{field: 'mockKs', title: '模拟考试得分'}
                    ,{field: 'zsKs', title: '正式考试得分'}
                ]],
                toolbar: true,
                defaultToolbar: ['print', 'exports'],
                page: false,
                loading:true,
                contentType: 'application/json',
                where: {
                    type:type,
                    startDate: $('#startDate').val(),
                    endDate: $('#endDate').val(),
                    keyword: $('#globalSearch').val(),
                }, // 将查询参数传入
            });
        };

        // 初始化表格
        initTable();

        // 监听查询按钮事件
        form.on('submit(search)',function (data){
            const params = {
                ...data.field, // 获取表单中的筛选条件
                keyword: $('#globalSearch').val(), // 添加全局搜索关键词
            };
            params.type=type;
            params.startDate=$('#startDate').val();
            params.endDate=$('#endDate').val();
            console.log(params)
            table.reload('test', { where: params });
            return false;
        });
    });
    // 注意：Layui本身不直接提供Date对象的format方法，以下是一个简单的实现示例
    Date.prototype.format = function(fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>
</body>
</html>
